<template>
  <div id="zhangdan_edit">
    <van-notify id="van-notify" />

    <van-form @submit="onSubmit">
      <van-field
        v-model="data.name"
        name="name"
        label="商品名称"
        placeholder="商品名称"
        :rules="[{ required: true, message: '请填写商品名称' }]"
      />
      <van-field
        v-model="data.price"
        type="number"
        label="价格"
        :rules="[{ required: true, message: '请填写商品价格' }]"
      />
      <van-field v-model="data.originPrice" type="number" label="原价" />
      <van-field name="radio" label="收支">
        <template #input>
          <van-radio-group v-model="data.shouZhiType" direction="horizontal">
            <van-radio name="1">收入</van-radio>
            <van-radio name="2">支出</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        readonly
        clickable
        :value="data.date"
        label="日期"
        placeholder="点击选择日期"
        @click="showTime = true"
        :rules="[{ required: true, message: '请选择消费日期' }]"
      />
      <van-calendar
        v-model="showTime"
        :min-date="minDate"
        :show-confirm="false"
        @confirm="onConfirmTime"
      />
      <van-field
        v-model="data.classified"
        name="picker"
        label="选择器"
        placeholder="点击选择分类"
        @click="showCatetorys = true"
        :rules="[{ required: true, message: '请选择类目' }]"
      />
      <van-popup v-model="showCatetorys" position="bottom">
        <van-picker
          :show-toolbar="true"
          :columns="catetorys"
          @confirm="onConfirmCatetory"
          @cancel="showCatetorys = false"
        />
      </van-popup>
      <van-field name="rate" label="评分">
        <template #input>
          <van-rate v-model="data.rate" />
        </template>
      </van-field>
      <van-field
        v-model="data.desc"
        rows="1"
        autosize
        label="描述"
        type="textarea"
        placeholder="请输入描述"
      />
      <van-field name="uploader" label="图片">
        <template #input>
          <van-uploader
            result-type="dataUrl"
            accept="image/png, image/jpeg"
            v-model="img"
            :after-read="after_read"
            :max-count="1"
          />
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: "ZhangDan_Edit",
  data() {
    return {
      minDate: new Date(2020, 0, 1),
      showCatetorys: false,
      showTime: false,
      catetorys: [],
      add: true,
      img: [],
      data: {
        rate: 3,
        date: formatDate(new Date()),
        classified: "吃吃喝喝",
        shouZhiType: "2",
      },
    };
  },
  methods: {
    after_read(file, detail) {
      let param = new FormData();
      param.append("file", file.file);
      this.$api.upload("api1", "app/file/save-bytes", param, (r) => {
        this.img = [
          {
            url: this.$api.baseURL.api1 + "file/files?id=" + r,
            isImage: true,
          },
        ];
        this.data.fileId = r;
      });
    },
    onSubmit() {
      var params = {
        name: this.data.name,
        price: this.data.price,
        originPrice: this.data.originPrice,
        shouZhiType: this.data.shouZhiType,
        date: this.data.date,
        classified: this.data.classified,
        rate: this.data.rate,
        desc: this.data.desc,
        fileId: this.data.fileId,
      };
      if (this.add) {
        this.$api.post("api1", "app/zhang-dan", params, (r) => {
          this.$router.push("/zhangdan");
        });
      } else {
        this.$api.put("api1", "app/zhang-dan/" + this.id, params, (r) => {
          this.$router.push("/zhangdan");
        });
      }
    },
    onConfirmCatetory(item) {
      // console.log(item);
      this.data.classified = item.text;
      this.showCatetorys = false;
    },
    onConfirmTime(time) {
      this.showTime = false;
      this.data.date = formatDate(time);
    },
    getCatetorys() {
      this.$api.get(
        "api1",
        "app/dictionary?parentCode=Classified",
        null,
        (r) => {
          // this.catetorys = r;
          for (let i = 0; i < r.length; i++) {
            let item = r[i];
            this.catetorys.push({
              text: item.name,
              disabled: item.isEnable == false,
              key: item.value,
            });
          }
        }
      );
    },
    init() {
      if (this.add) {
        return;
      }
      this.$api.get("api1", "app/zhang-dan/" + this.id, null, (r) => {
        this.data = r;
        this.data.shouZhiType = r.shouZhiType + "";
        this.img = [
          {
            url:
              this.$api.baseURL["api1"] + "file/files?id=" + this.data.fileId,
            isImage: true,
            status: "done",
            deletable: true,
          },
        ];
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.add = this.id == "null";
    this.getCatetorys();
    this.init();
  },
};

//时间日期转换成string
var formatDate = function (date) {
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = date.getDate();
  d = d < 10 ? "0" + d : d;
  var h = date.getHours();
  var minute = date.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  var second = date.getSeconds();
  second = minute < 10 ? "0" + second : second;
  return y + "-" + m + "-" + d; //+ " " + h + ":" + minute + ":" + second;
};
</script>

<style>
</style>